@import '../../styles/variables.scss';

.products-page {
  .page-header {
    @include flex-between;
    margin-bottom: $spacing-lg;
    
    .header-left {
      h1 {
        font-size: $font-size-xxl;
        color: $text-color;
        margin-bottom: $spacing-xs;
      }
      
      p {
        font-size: $font-size-base;
        color: $text-color-secondary;
        margin: 0;
      }
    }
  }
  
  .category-card {
    margin-bottom: $spacing-lg;
    
    .ant-tabs {
      .ant-tabs-nav {
        margin-bottom: 0;
        
        .ant-tabs-nav-wrap {
          .ant-tabs-nav-list {
            .ant-tabs-tab {
              padding: $spacing-sm $spacing-md;
              border-radius: $border-radius-base;
              margin-right: $spacing-sm;
              
              &:hover {
                background-color: rgba($primary-color, 0.1);
              }
              
              &.ant-tabs-tab-active {
                background-color: $primary-color;
                color: $white;
                
                .ant-tabs-tab-btn {
                  color: $white;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .filter-card {
    margin-bottom: $spacing-lg;
    
    .filter-content {
      .ant-input-search {
        .ant-input {
          border-radius: $border-radius-base;
        }
        
        .ant-input-search-button {
          border-radius: 0 $border-radius-base $border-radius-base 0;
        }
      }
      
      .ant-select {
        .ant-select-selector {
          border-radius: $border-radius-base;
        }
      }
    }
  }
  
  .products-card {
    .ant-card-body {
      padding: $spacing-lg;
    }
    
    .product-card {
      height: 100%;
      border-radius: $border-radius-lg;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 2px solid $border-color;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: $box-shadow-lg;
        border-color: $primary-color;
      }
      
      .ant-card-cover {
        position: relative;
        background: #f8f8f8;
        
        .product-image {
          position: relative;
          overflow: hidden;
          height: 200px;
          
          .ant-image {
            width: 100%;
            height: 100%;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s ease;
            }
          }
          
          &:hover .ant-image img {
            transform: scale(1.05);
          }
          
          .discount-badge {
            position: absolute;
            top: $spacing-sm;
            right: $spacing-sm;
            background: linear-gradient(135deg, $error-color, #ff6b6b);
            color: $white;
            padding: $spacing-xs $spacing-sm;
            border-radius: $border-radius-base;
            font-size: $font-size-xs;
            font-weight: 600;
            box-shadow: $box-shadow-base;
            @include flex-center;
            gap: $spacing-xs;
            z-index: 2;
          }
          
          .category-badge {
            position: absolute;
            bottom: $spacing-sm;
            left: $spacing-sm;
            margin: 0;
            font-size: $font-size-xs;
            font-weight: 600;
            padding: $spacing-xs $spacing-md;
            border-radius: $border-radius-base;
            box-shadow: $box-shadow-sm;
            z-index: 2;
          }
        }
      }
      
      .ant-card-body {
        padding: $spacing-md;
        
        .product-info {
          .title-price-row {
            @include flex-between;
            align-items: flex-start;
            gap: $spacing-sm;
            margin-bottom: $spacing-md;
            
            .product-title {
              font-size: $font-size-base;
              font-weight: 600;
              color: $text-color;
              margin: 0;
              line-height: 1.4;
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            
            .price {
              font-size: $font-size-xl;
              font-weight: 700;
              color: $error-color;
              white-space: nowrap;
              flex-shrink: 0;
            }
          }
          
          .product-description {
            font-size: $font-size-sm;
            color: $text-color-secondary;
            margin: 0 0 $spacing-md 0;
            line-height: 1.5;
            min-height: 3em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          
          .product-footer {
            @include flex-between;
            align-items: center;
            padding-top: $spacing-md;
            border-top: 1px solid $border-color;
            
            .source-info {
              display: flex;
              align-items: center;
              gap: $spacing-xs;
              font-size: $font-size-sm;
              color: $text-color-secondary;
              flex: 1;
              margin-right: $spacing-sm;
              
              .anticon {
                color: $primary-color;
                font-size: $font-size-base;
              }
              
              span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            
            .ant-btn {
              flex-shrink: 0;
            }
          }
        }
      }
    }
    
    .pagination-wrapper {
      margin-top: $spacing-xl;
      text-align: center;
      
      .ant-pagination {
        .ant-pagination-item {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          font-size: 18px !important;
          margin: 0 8px !important;
          border-radius: $border-radius-sm;
          
          a {
            font-size: 18px !important;
            line-height: 46px !important;
          }
          
          &.ant-pagination-item-active {
            background-color: $primary-color;
            border-color: $primary-color;
            border-width: 2px !important;
            font-weight: 600 !important;
          }
        }
        
        .ant-pagination-prev,
        .ant-pagination-next {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          margin: 0 8px !important;
          border-radius: $border-radius-sm;
          
          .ant-pagination-item-link {
            font-size: 18px !important;
            line-height: 46px !important;
          }
        }
        
        .ant-pagination-jump-prev,
        .ant-pagination-jump-next {
          min-width: 48px !important;
          height: 48px !important;
          line-height: 46px !important;
          margin: 0 8px !important;
          
          .ant-pagination-item-container {
            .ant-pagination-item-ellipsis,
            .ant-pagination-item-link-icon {
              font-size: 18px !important;
            }
          }
        }
        
        .ant-pagination-options {
          .ant-pagination-options-quick-jumper {
            height: 48px !important;
            line-height: 48px !important;
            font-size: 18px !important;
            
            input {
              height: 48px !important;
              width: 70px !important;
              font-size: 18px !important;
            }
          }
        }
        
        .ant-pagination-total-text {
          height: 48px !important;
          line-height: 48px !important;
          font-size: 18px !important;
        }
      }
    }
  }
}